<template>
  <div>
    <Header />

    <div style="margin: 20px 0; min-height: 500px;">
      <router-view />
    </div>
    <Footer v-if="!shouldHideFooter" />
  </div>
</template>

<script>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
export default {
  name: 'App',
  components: { Header, Footer },
  data() {
    return {
      isRouterReady: false
    }
  },
  async mounted() {
    // 检查路由是否就绪
    await this.$router.isReady()
    this.isRouterReady = true
  },
  computed: {
    isAboutPage() {
      return this.$route.name === 'About'
    },
    shouldHideFooter() {
      const hideFooterPages = ['About', 'DigitalMap', 'QualityComparison', 'QualityEvaluation']
      return hideFooterPages.includes(this.$route.name)
    }
  }
}
</script>

<style>
@import '@/assets/theme.css';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  background-color: var(--color-bg);
}

#app {
  min-height: 100vh;
  background: var(--color-bg);
}
</style>
